﻿@page "/GridGrouping"
<div class="demo-description mw-1100">
    <h2>Group Data</h2>
    <p>
        Enable the Data Grid's <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.ShowGroupPanel">ShowGroupPanel</a> property to display the Group Panel.
        Users can drag and drop a column header onto the Group Panel to group data by this column. They can also drag headers within this panel to change the group order.
        To ungroup data by a column, users should drag the column header from the Group Panel back to the Column Header Panel.
    </p>
    <p>
        To prevent users from changing the group options in the entire component, disable the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.AllowColumnDragDrop">DxDataGrid.AllowColumnDragDrop</a> property.
        To disable grouping by individual columns, use their <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.AllowGroup">AllowGroup</a> property.
    </p>
    <p>
        To group grid data in code, set a column's <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.GroupIndex">GroupIndex</a> property to a zero-based integer value.
        If you group data by multiple columns, this property specifies the group level. The lower the value, the higher a column's group level.
        To ungroup grid data, set the <b>GroupIndex</b> property to -1.
    </p>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.ShowGroupedColumns">ShowGroupedColumns</a> property to specify whether to display grouped columns among other columns in the Data Grid.
    </p>
</div>

@if (Vacancies == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <DxDataGrid Data="@Vacancies"
                ShowPager="true"
                ShowGroupPanel="true"
                CssClass="mw-1100">
        <DxDataGridColumn Field="@nameof(Vacancy.Id)" Width="70px" AllowGroup="false"></DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(Vacancy.Description)" Caption="Vacancy"></DxDataGridColumn>
        <DxDataGridComboBoxColumn Field="@nameof(Vacancy.Region)" Data="@VacancyRepository.Regions" GroupIndex="0"></DxDataGridComboBoxColumn>
        <DxDataGridColumn Field="@nameof(Vacancy.City)" GroupIndex="1"></DxDataGridColumn>
    </DxDataGrid>
}

<CodeSnippet_GridGrouping></CodeSnippet_GridGrouping>

@code {
    IEnumerable<Vacancy> Vacancies;

    protected override async Task OnInitializedAsync()
    {
        Vacancies = await VacancyRepository.GetVacancies(100);
    }
}
